<template>
  <v-charts
    class="v-charts"
    :autoresize="true"
    :options="options"
    @click="handleClick"
  ></v-charts>
</template>

<script>
import VCharts from "vue-echarts";
import "echarts/lib/chart/map";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/polar";
import "echarts/lib/component/geo";
import "echarts/lib/component/legend";
import "echarts/lib/component/title";
import "echarts/lib/component/visualMap";
import "echarts/map/js/world";
import cqMap from "./../../../scripts/data/cq-GeoJson";

import { getOptionsByVsMap } from "./../scripts/echarts-map";
import { randomNum } from "../../../scripts/utils";

export default {
  name: "VsMapECharts",
  components: {
    VCharts
  },
  filters: {},
  props: {
    height: {
      type: Number,
      default: 600
    }
  },
  data() {
    return {
      cqMapCenter: [],
      user: "",
      myChart: null,
      oldOptions: null,
      options: {},
      rawData: [],
      geoData: [
        {
          name: "丰都县",
          itemStyle: {
            areaColor: "#5E9DD6",
            color: "rgba(202,226,56,0.5)"
          }
        },
        {
          name: "万州区",
          itemStyle: {
            areaColor: "#5E9DD6",
            color: "#5E9DD6"
          }
        }
      ],
      scatterData: [
        { name: "万州区", value: [108.380246, 30.807807, 4500] },
        { name: "合川区", value: [106.265554, 29.990993, 3500] },
        { name: "永川区", value: [105.894714, 29.348748, 1900] },
        { name: "南川区", value: [107.098153, 29.156646, 3200] },
        { name: "璧山区", value: [106.231126, 29.593581, 3500] },
        { name: "铜梁区", value: [106.054948, 29.839944, 1700] },
        { name: "潼南区", value: [105.841818, 30.189554, 2800] },
        { name: "荣昌区", value: [105.594061, 29.403627, 3900] },
        { name: "开州区", value: [108.413317, 31.167735, 4900] },
        { name: "梁平区", value: [107.800034, 30.672168, 3700] },
        { name: "武隆区", value: [107.75655, 29.32376, 3300] }
      ],
      dataTemp: [
        {
          lng: "108.380246",
          num: 280,
          time: "2020-03-19 08",
          stationname: "实验小学（慈溪）",
          lat: "30.807807"
        }
      ],
      timer: null,
      timerOut: null
    };
  },
  computed: {},
  watch: {},
  created() {
    let _cqMap = JSON.parse(JSON.stringify(cqMap));
    this.cqMapCenter = _cqMap.features.map(item => {
      return {
        name: item["properties"]["name"],
        value: item["properties"]["center"]
      };
    });
  },
  mounted() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
    clearTimeout(this.timerOut);
    this.timerOut = null;
  },
  methods: {
    mapInit(data) {
      let _cqMap = JSON.parse(JSON.stringify(cqMap));

      // let _seriesData = _cqMap.features.map(item => item["properties"]["name"]);

      // _seriesData.forEach(item => {
      //   this.options.series[0].data.push({ name: item });
      // });
      VCharts.registerMap("chongqing", _cqMap);
      if (!data.length) return;
      this.rawData = data;
      this.init();
    },
    init() {
      const { rawData } = this;
      // scatter data
      const _scatterData = rawData.map(item => {
        item.value.push(randomNum(1000, 5000));
        return item;
      });
      // geo data
      const _geoData = rawData.map(item => {
        let objc = {
          name: item.name,
          itemStyle: {
            areaColor: "#5E9DD6",
            color: "#5E9DD6"
          }
        };
        return objc;
      });
      // 旗帜data
      const _dataTemp = [
        {
          lng: rawData[0].value[0],
          lat: rawData[0].value[1]
        }
      ];
      // seriesMap data
      const _seriesMapData = rawData.map((item, index) => {
        let objc = {
          name: item.name,
          selected: false,
          value: randomNum(1000, 5000)
        };
        if (index == 0) {
          objc.selected = true;
        }
        return objc;
      });
      this.options = getOptionsByVsMap({
        geoData: _geoData,
        dataTemp: _dataTemp,
        scatterData: _scatterData,
        seriesMapData: _seriesMapData
      });
      this.oldOptions = JSON.parse(JSON.stringify(this.options));
      this.showClickArea(rawData[0]);
      this.randShowAreaInterVal();
    },

    randShowAreaInterVal() {
      const { rawData } = this;
      this.timer = setInterval(() => {
        let _nameIndex = randomNum(1, rawData.length);
        this.handleClick({
          name: rawData[_nameIndex].name,
          clearInterVal: true
        });
      }, 4000);
    },
    clearShowInterVal() {
      clearInterval(this.timer);
      this.timer = null;
      clearTimeout(this.timerOut);
      this.timerOut = null;
    },

    randomData() {
      let result = Math.round(Math.random() * 1000);
      return result;
    },
    handleClick(e) {
      if (!e.clearInterVal) {
        this.clearShowInterVal();
        this.timerOut = setTimeout(() => {
          this.randShowAreaInterVal();
        }, 4000);
      }
      const { rawData } = this;
      let isShow = rawData.find(item => item.name == e.name);
      if (isShow) {
        this.$emit("on-back", e.name);
        this.showClickArea(Object.assign({}, e));
        this.showQiArea(Object.assign({}, { name: e.name }, isShow));
      } else {
        this.$message.warning("此区域暂无数据");
      }
    },
    showClickArea(areaInfo) {
      // let isShow = this.options.geo.regions.find(
      //   item => item.name === areaInfo.name
      // );
      // if (isShow) {
      //   this.options.geo.regions = this.options.geo.regions.map(item => {
      //     if (item.name === areaInfo.name) {
      //       item.itemStyle = {
      //         areaColor: "rgba(202,226,56,1)",
      //         color: "rgba(202,226,56,1)"
      //       };
      //     } else {
      //       item.itemStyle = {
      //         areaColor: "#5E9DD6",
      //         color: "#5E9DD6"
      //       };
      //     }
      //     return item;
      //   });
      // } else {
      //   this.options.geo.regions = this.options.geo.regions.map(item => {
      //     item.itemStyle = {
      //       areaColor: "#5E9DD6",
      //       color: "#5E9DD6"
      //     };
      //     return item;
      //   });
      //   this.options.geo.regions.push({
      //     name: areaInfo.name,
      //     itemStyle: {
      //       areaColor: "rgba(202,226,56,1)",
      //       color: "rgba(202,226,56,1)"
      //     }
      //   });
      // }
      let isShow = this.options.series[0].data.find(
        item => item.name === areaInfo.name
      );
      if (isShow) {
        this.options.series[0].data = this.options.series[0].data.map(item => {
          item.selected = item.name === areaInfo.name;
          return item;
        });
      }
    },
    showQiArea(data) {
      const dataTemp = [
        {
          lng: data.value[0],
          lat: data.value[1],
          num: 200,
          name: data.name
        }
      ];
      this.options.series[1].data[0].lng = dataTemp[0].lng;
      this.options.series[1].data[0].lat = dataTemp[0].lat;
    }
  }
};
</script>

<style lang="less">
.v-charts {
  width: 100%;
  height: 100%;
  color: #ececec;
  font-weight: normal;
}
</style>
